<template>
	<view class="qun">
		<view class="name">
			选择提现微信/支付宝
		</view>
	
		<view class="chiocelist">
			<view :class="{'active':cur==index}" class="item" :key="index" @click="cur=index" v-for="(item,index) in list">
				<view class="left">
					<image class="img" :src="item.icon" mode="widthFix"></image>
					{{item.name}}
				</view>
				<view class="">
					<image class="icon" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/52.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		
		<view class="nums">
			<view class="tit">
				提现金额
			</view>
			<view class="content">
				<u-input height="112" border-color="#DBDBDB" v-model="money" type="number" :border="true" />
				<view class="unit">
					元
				</view>
			</view>
		</view>
		<view @click="sure" class="btns">
			确认提现
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				money:0,
				cur:0,
				list:[{
					name:'微信',
					icon:'https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/50.png'
				},{
					name:'支付宝',
					icon:'https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/51.png'
				}],
				src: 'https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/32.png'
			}
		},
		methods: {
			sure(){
				if(!money){
					this.$u.toast('提现金额不能为0！'); 
				}else{
					// 调接口
					
					this.$emit('closeMask')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.qun {
		width: 600rpx;
		background: #FFFCFA;
		border-radius: 29rpx 29rpx 29rpx 29rpx;
		opacity: 1;
		border: 1rpx solid #FFFFFF;
		padding-bottom: 41rpx;

		.name {
			margin-top: 56rpx;
			font-size: 40rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			// line-height: 47rpx;
			text-align: center;
		}
		.nums{
			.tit{
				padding: 53rpx 34rpx 18rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 35rpx;
			}
			.content{
				padding:0 34rpx 18rpx;
				display: flex;
				align-items: center;
				.unit{
					padding: 0 26rpx;
					font-size: 36rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 42rpx;
				}
			}
		}
		.chiocelist{
			.item{
				margin:24rpx 34rpx;
				padding: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border:1px solid  #DBDBDB;
				border-radius: 11rpx;
				&.active{
					background: #F4F7FF;
					border:1px solid  #3757FF;
					.icon{
						display: block;
					}
				}
				.left{
					font-size: 30rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 35rpx;
					display: flex;
					align-items: center;
					.img{
						width: 52rpx;
						height: 52rpx;
						margin-right: 32rpx;
					}
				}
				.icon{
					display: none;
					width: 41.67rpx;
					height: 41.67rpx;
				}
			}
		}

		

		.btns {


			width: 244rpx;
			height: 64rpx;
			background: #3757FF;
			border-radius: 41rpx 41rpx 41rpx 41rpx;
			color: #f6f4ff;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 55rpx auto 0 auto;

		}

	}
</style>
